
<template>
  <div class="category">
    <Scroll ref="scrollRef" class="content1" :probe-type='3'>
      <menu-list :category='category' @selectItem='selectItem' />
    </Scroll>
    <Scroll ref="scrollRef" class="content2" :probe-type='3'>
      <tab-content :subcategory='subcategory' @imgLoad='imageLoad' />
    </Scroll>
  </div>
</template>

<script>
import MenuList from './childComps/tabMenu'
import TabContent from './childComps/TabContent'
import Scroll from 'components/common/scroll/Scroll'
import { getCategory, getSubcategory } from 'network/category'
export default {
  name: 'categoryIndex',
  components: {
    MenuList,
    TabContent,
    Scroll
  },

  data() {
    return {
      category: [],
      subcategory: [],
      cache: {}
    }
  },
  created() {
    this.loadCategory()
  },
  methods: {
    selectItem(i) {
      const maitKey = this.category[i].maitKey
      if (this.cache[maitKey]) {
        this.subcategory = this.cache[maitKey]
        return
      } else {
        this.loadSubcategory(maitKey)
      }
    },
    loadCategory() {
      getCategory().then(res => {
        this.category = res.data.category.list
        this.selectItem(0)
      })
    },
    loadSubcategory(maitKey) {
      getSubcategory(maitKey).then(res => {
        this.cache[maitKey] = res.data.list

        this.subcategory = this.cache[maitKey]
      })
    },
    imageLoad() {
      this.$refs.scrollRef.refresh()
    }
  },
  mounted() {}
}
</script>

<style scoped>
.category {
  position: relative;
  height: 100vh;
}
.content1,
.content2 {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 49px;
}
.content1 {
  width: 100px;
}
.content2 {
  left: 100px;
}
</style>